<template>
  <view class="index-wrapper">
    <view class="wrapper-title" v-if="title">{{ title }}</view>
    <view class="line" v-if="titleLine && title" />
    <view class="wrapper-box">
      <view
          v-for="(item, index) in filterList"
          :key="index"
          class="box-item"
          :style="{paddingBottom: (index + 1) % rowCount === 0 && index + 1 !== filterList.length ? '20rpx' : 0, width: itemWidth}"
          @click="handleClick(item, index)"
          v-show="item[propsOptions.show] !== false"
      >
        <view class="wrapper-box-item">
          <view class="box-item-img" :style="{
            borderRadius: imgTheme === 'square' ? '8rpx' : '50%',
            height: item.height || height,
            width: item.width || width,
            background: `url(${item[propsOptions.imgUrl]}) 100% / 100%`
          }">
            <view class="sign" v-if="item[propsOptions.count] > 0 && !customCount"
                  :style="[
                  {top: item.countTop || countTop},
                  { right: item.countRight || countRight}
                  ]">{{item[propsOptions.count] > 99 ? 99 : item[propsOptions.count]}}</view>
            <slot name="count" v-else :item="item"></slot>
          </view>
          <view class="box-item-text">{{item[propsOptions.name]}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 显示list数据对应的字段
    propsOptions: {
      type: Object,
      default: () => {
        return {
          name: 'name',
          count: 'count',
          imgUrl: 'imgUrl',
          show: 'show'
        }
      }
    },
    // 一行显示几个
    rowCount: {
      type: Number,
      default: 4
    },
    // list数据
    list: {
      type: Array,
      default: () => []
    },
    // title
    title: {
      type: String,
      default: ''
    },
    // 是否显示title下面的线
    titleLine: {
      type: Boolean,
      default: true
    },
    // 是否启用自定义插槽count
    customCount: {
      type: Boolean,
      default: false
    },
    // 根据图片样式(有圆的有方形的)自定义count位置
    countTop: {
      type: String,
      default: '-10rpx'
    },
    // 根据图片样式(有圆的有方形的)自定义count位置
    countRight: {
      type: String,
      default: '-10rpx'
    },
    // 图片宽度
    width: {
      type: String,
      default: '96rpx'
    },
    // 图片高度
    height: {
      type: String,
      default: '96rpx'
    },
    // 图片样式 方形| 圆形  square | round
    imgTheme: {
      type: String,
      default: 'square'
    }
  },
  computed: {
    filterList() {
      return this.list.filter(item => item.show !== false);
    },
    itemWidth() {
      return 100 / this.rowCount + '%';
    }
  },
  methods: {
    handleClick(item, index) {
      this.$emit('click', {item, index});
    }
  }
}
</script>

<style lang="scss" scoped>
.index-wrapper{
  background-color: #fff;
  margin: 10rpx 30rpx;
  //padding: 24rpx 30rpx 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

  .wrapper-title{
    font-size: $uni-font-size-base;
    font-weight: bold;
    padding: 20rpx 30rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .line{
    width: 100%;
    vertical-align: middle;
    border-bottom: 1rpx solid rgb(228, 231, 237);
    transform: scaleY(0.5);
  }

  .wrapper-box{
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 30rpx;

    .wrapper-box-item{
      width: 100%;
    }
    .sign{
      background: #F56C6C;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      color: #fff;
      position: absolute;
      z-index: 9;
      text-align: center;
      line-height: 30rpx;
      font-size: 18rpx;
    }

    .box-item{
      display: flex;
      justify-content: space-around;
      .box-item-img {
        position: relative;
        width: 96rpx;
        height: 96rpx;
        margin-left: 50%;
        transform: translateX(-50%);
      }
      .box-item-text {
        text-align: center;
        font-size: $uni-font-size-sm;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
